<style>
    .ui-main > .el-divider .el-divider__text {
        background: #F2F2F2;
    }

    .ui-main > h3 {
        padding-left: 20px;
        font-size: 20px;
        border-left: 2px solid #409EFF;
        margin-left: 10px;
    }
</style>
<template>
    <ly-page>
        <ly-navi type="title" title="DEMO5"></ly-navi>

        <ly-page-content>
            <ly-tip>
                <ul>
                    <li>请在成功打出正式包后填写完整下方资料,然后在对应运维群里找对应客服,客服会使用下方资料帮你将 应用上架 苹果应用市场</li>
                    <li>请在成功打出正式包后填写完整下方资料</li>
                    <li>请在成功打出正式包后填写完整下方资料,完整下方资料</li>
                </ul>
            </ly-tip>
            <ly-table-filter background  @search="store.load(1)" @reset="store.reset()">
                <el-form-item label="状态">
                    <el-select v-model="store.params.status" placeholder="全部/未处理/已处理">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="未处理" value="1"></el-option>
                        <el-option label="已处理" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程状态">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option label="未结束" value="1"></el-option>
                        <el-option label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option label="未结束" value="1"></el-option>
                        <el-option label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option label="未结束" value="1"></el-option>
                        <el-option label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学员">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option label="未结束" value="1"></el-option>
                        <el-option label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-button size="small">导出</el-button>
                <el-button type="text" size="small">导出历史</el-button>
            </ly-table-filter>
            <ly-table-info prefix="共有" :num="2000" append="客户" >
                <ly-info tip="本月/今日跟进客户次数（去重）" label="本月/今日跟进客户数" color="red">1/2</ly-info>
                <ly-info tip="本月/今日添加好友人数，同一个公司的只算一个，删除了不扣除）" label="本月/今日企微好友" color="red">100/23123</ly-info>
                <ly-info tip="本月/今日通过企微侧边栏进行邀请添加企微群，一个群算一个）" label="本月/今日企微群" color="red">/12124</ly-info>
                <ly-info  label="最后更新时间" >2022-11-08</ly-info>
            </ly-table-info>

            <el-tabs v-model="store.params.status" @tab-click="store.load()">
                <el-tab-pane label="全部" name="0"></el-tab-pane>
                <el-tab-pane label="待签约" name="1"></el-tab-pane>
                <el-tab-pane label="正常学员" name="2"></el-tab-pane>
                <el-tab-pane label="历史学员" name="3"></el-tab-pane>
            </el-tabs>

            <ly-table v-table-affix :data="store.data" v-loading="store.loading" split>
                <ly-table-header>
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.__checked" @change="store.onItemCheckChange()"></el-checkbox>
                        <div>
                            <ly-info style="font-weight: bold" label="协议编号">10000000</ly-info>
                            <div>
                                <ly-info label="添加时间">2019-11-09</ly-info>
                                <ly-info label="到期时间">2019-11-09</ly-info>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary" size="mini">详情</el-button>
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="primary" size="mini">删除</el-button>
                        </div>
                    </template>
                </ly-table-header>

                <ly-table-column label="栏目1" align="center">
                    <span>
                        bbb
                    </span>
                </ly-table-column>
                <ly-table-column :width="500" name="items">
                    <ly-table-column label='栏目2'>
                        <template slot-scope="scope">
                            <ly-info label="添加时间">{{scope.item.source_name}}</ly-info>
                        </template>
                    </ly-table-column>
                    <ly-table-column label='栏目3' :width="200">
                        <template slot-scope="scope">
                            <ly-info label="活跃时间">{{scope.item.phone}}</ly-info>
                        </template>
                    </ly-table-column>
                </ly-table-column>
                <ly-table-column label="操作" width="200">
                    <ly-button-group>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>

                    </ly-button-group>
                </ly-table-column>
            </ly-table>
            <ly-pagination check-all :store="store">
                <el-button type="primary" size="small">批量删除</el-button>
                <el-button type="primary" size="small">批量更新</el-button>
            </ly-pagination>
        </ly-page-content>
    </ly-page>
</template>
<script>
    //这里定义组件
    Rap.define("", ['/table/mock.js'], function (mock) {
        return {
            data: function () {
                var store = Ly.dataStore({
                    params: {
                        status: '0'
                    },
                    data: function () {
                        var list = mock.mockList("id,name,create_time:date,status_show:marketing_clue_status,source_name:marketing_source", 5);

                        for (var i = 0; i < list.length; i++) {
                            list[i].items = mock.mockList("id,source_name:marketing_source,phone", 3)
                        }
                        return list;
                    }
                });
                store.load(1);
                return {
                    store: store

                }
            }, created: function () {

            }, init: function (query) {

            },
            methods: {}
        }
    })
</script>